<template>
  <div class="box">
    <!--    操作-->
    <div class="operateDiv">
      <div>
        <el-button type="danger" plain class="deleteBtn" v-if="deleteSelectTrue"
          >删除所选</el-button
        >
        <!--        删除所选按钮暂时隐藏-->
        <!--        <el-button type="danger" plain disabled v-if="deleteSelectFalse">删除所选</el-button>-->
        <el-button type="success" @click="increaseBtn" icon="el-icon-plus"
          >添加</el-button
        >
        <el-button
          type="primary"
          :loading="reset"
          icon="el-icon-refresh"
          @click="resetBtn"
          >刷新列表</el-button
        >
      </div>
      <!--      搜索-->
      <div class="searchDiv">
        <div>
          <span>系统名称：</span>
          <el-input
            placeholder="请输入内容"
            v-model="sysName"
            clearable
            class="input"
          >
          </el-input>
        </div>
        <div>
          <span>url：</span>
          <el-input
            placeholder="请输入内容"
            v-model="sysUrl"
            clearable
            class="input"
          >
          </el-input>
        </div>
        <el-button type="primary" icon="el-icon-search" @click="searchBtn"
          >搜索</el-button
        >
      </div>
    </div>

    <!--表格信息-->
    <el-table :data="tableData" class="table" height="500" style="width: 100%">
      <el-table-column fixed type="selection" width="55"> </el-table-column>
      <el-table-column label="图标" width="120">
        <template slot-scope="scope">
          <div class="demo-image__placeholder">
            <div class="block">
              <el-image
                class="logoImg"
                :src="baseUrl + scope.row.logo"
              ></el-image>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="系统名称" width="220">
      </el-table-column>
      <el-table-column prop="description" label="描述" width="300">
      </el-table-column>
      <el-table-column prop="logoutUrl" label="url" width="300">
      </el-table-column>
      <el-table-column label="详情" width="50">
        <el-button type="text" size="small">详情</el-button>
      </el-table-column>
      <el-table-column width="40"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            class="red"
            @click="clear(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--    添加信息弹窗-->
    <el-dialog title="系统信息添加" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="formRules">
        <el-form-item label="logo" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            action="#"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :http-request="httpRequest"
            :limit="1"
            :on-exceed="handleExceed"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <div class="imgPreview">
          <div>
            <span>预览：</span>
          </div>
          <div class="demo-image__placeholder">
            <div class="block">
              <el-image
                class="logoImg"
                :src="baseUrl + form.fileUrl"
              ></el-image>
            </div>
          </div>
        </div>

        <el-form-item
          label="系统名称"
          :label-width="formLabelWidth"
          prop="sys_name"
        >
          <el-input v-model="form.sys_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="系统描述" :label-width="formLabelWidth">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="系统url"
          :label-width="formLabelWidth"
          prop="sys_url"
        >
          <el-input v-model="form.sys_url" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSubmitSysInfo"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { uploadFile } from "../../../api/sso/infoManagement/file";
import {
  editService,
  delServiceUser,
} from "../../../api/sso/infoManagement/service";

import { increaseSysInfo } from "../../../api/sso/cas/services";
import { getAllService } from "../../../api/sso/cas/services";
import { delServiceById } from "../../../api/sso/cas/services";
import { getServiceByName } from "../../../api/sso/cas/services";
import { getServiceByUrl } from "../../../api/sso/cas/services";

import myUrl from "@/myUrl";

export default {
  data() {
    return {
      // form校验规则
      formRules: {
        // url校验
        sys_url: [
          {
            type: "url",
            message: "url格式错误",
            trigger: "blur",
            required: true,
          },
        ],
        sys_name: [
          {
            message: "不能为空",
            trigger: "blur",
            required: true,
          },
        ],
      },
      //删除的时候需要的系统 id
      delSysId: "",
      // 删除所选按钮是否显示
      deleteSelectTrue: false,
      // 删除所选按钮是否显示
      deleteSelectFalse: true,
      // 重弄止按钮是否有重置的动画
      reset: false,
      //后端服务器路径
      baseUrl: myUrl.baseUrl,
      //搜索需要填的系统名称才能
      sysName: "",
      //搜索需要填的系统Url
      sysUrl: "",
      // 列表中的数据
      tableData: [],
      //单个系统信息按钮弹出框是否弹出
      dialogFormVisible: false,
      //添加系统信息弹窗中的表单
      form: {
        sys_name: "",
        description: "",
        sys_url: "",
        fileUrl: "",
      },
      formLabelWidth: "120px",
      // 添加系统信息上传图片的数组
      fileList: [],
      sysInfoBtnSelect: "",
    };
  },
  created() {
    // 请求后端获取全部系统信息
    getAllService().then((res) => {
      this.tableData = res.rows;
    });
  },
  methods: {
    //搜索按钮
    searchBtn() {
      if (this.sysName == "" && this.sysUrl == "") {
        this.$message({
          type: "warning",
          message: "搜索内容不能为空",
        });
      }
      if (this.sysName != "" && this.sysUrl != "") {
        this.$message({
          type: "warning",
          message: "搜索条件只能有一个",
        });
      }
      if (this.sysName != "" && this.sysUrl == "") {
        getServiceByName(this.sysName).then((res) => {
          if (res == "failure") {
            this.tableData = [];
          } else {
            this.tableData = res.data;
          }
        });
      }
      if (this.sysName == "" && this.sysUrl != "") {
        getServiceByUrl(this.sysUrl).then((res) => {
          if (res == "failure") {
            this.tableData = [];
          } else {
            this.tableData = res.data;
          }
        });
      }
    },
    // 添加系统信息按钮
    increaseBtn() {
      this.dialogFormVisible = true;
      this.sysInfoBtnSelect = "increaseSysInfo";
      this.clearSysInfoForm();
    },
    //上传文件超出限制提示
    handleExceed() {
      this.$message({
        type: "error",
        message: "只能添加一张图片!",
      });
    },
    // 重置按钮
    resetBtn() {
      this.reset = true;
      getAllService().then((res) => {
        this.tableData = res.rows;
        this.reset = false;
      });
    },
    //添加系统信息方法
    submitSysInfo() {
      if (this.form.sys_url != "") {
        let Regexregisteredservic = {
          logoutUrl: this.form.sys_url,
          name: this.form.sys_name,
          description: this.form.description,
          logo: this.form.fileUrl,
        };
        increaseSysInfo(Regexregisteredservic).then((res) => {
          this.tableData = res.RegisteredServiceList;
          this.dialogFormVisible = false;
          this.clearSysInfoForm();
          this.$message({
            type: "success",
            message: res.msg,
          });
        });
      } else {
        this.$message({
          type: "error",
          message: "必填信息不能为空!",
        });
      }
    },
    //修改系统信息方法
    updateSysInfoSubmit() {
      editService(
        this.delSysId,
        this.form.sys_url,
        this.form.sys_name,
        this.form.description,
        this.form.fileUrl
      ).then((res) => {
        this.delSysId = "";
        this.clearSysInfoForm();
        this.$message({
          type: "success",
          message: "修改成功",
        });
        this.dialogFormVisible = false;

        // getAllService().then((res) => {
        this.tableData = res.RegisteredServiceList;
        this.reset = false;
        // });
      });
    },
    //系统信息弹框表单清空
    clearSysInfoForm() {
      this.form.sys_url = "";
      this.form.sys_name = "";
      this.form.description = "";
      this.form.fileUrl = "";
      this.fileList = [];
    },
    // 确认提交信息按钮（添加信息、修改信息）
    confirmSubmitSysInfo() {
      if (this.sysInfoBtnSelect == "increaseSysInfo") {
        this.submitSysInfo();
      } else {
        this.updateSysInfoSubmit();
      }
    },
    // 编辑按钮
    edit(row) {
      this.form.sys_name = row.name;
      this.form.sys_url = row.logoutUrl;
      this.form.description = row.description;
      this.form.fileUrl = row.logo;
      this.delSysId = row.id;
      this.fileList = [];
      this.sysInfoBtnSelect = "updateSysInfo";
      this.dialogFormVisible = true;
    },
    // table表格中的删除按钮
    clear(row) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delServiceById(row.id).then((res) => {
            // 重新获取一下service信息
            getAllService().then((res) => {
              this.tableData = res.rows;
            });
            delServiceUser(row.id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 上传文件移除的方法
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.form.fileUrl = "";
    },
    // 上传文件的方法
    handlePreview(file) {
      console.log(file);
    },
    // 添加系统信息中的上传文件
    httpRequest(request) {
      const formData = new FormData();
      formData.append("file", request.file);
      // 上传文件
      uploadFile(formData).then((res) => {
        this.form.fileUrl = res.fileName;
      });
    },
  },
};
</script>

<style scoped>
.box {
  margin-top: 20px;
  width: 90%;
  position: absolute;
  left: 5%;
}

.operateDiv {
  display: flex;
  justify-content: space-between;
}

.searchDiv {
  display: flex;
  justify-content: space-between;
}

.table {
  width: 100%;
  margin-top: 20px;
}

.input {
  width: 200px;
  margin-right: 10px;
}

.imgPreview {
  display: flex;
  justify-content: space-around;
  font-size: 30px;
  color: #00afff;
  border: solid #00afff 2px;
  border-radius: 10px;
  margin-bottom: 5px;
  width: 85%;
  margin-left: 15%;
  padding-top: 5px;
}

.red {
  color: red;
}

.deleteBtn {
}

.logoImg {
  width: 100px;
  height: 100px;
  border-radius: 20px;
}
</style>
